Amazon Connect Streamsの初期セットアップ手順

#Amazon Connect

#AWS

酒匂祐也

2017.12.22

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

事業開発部の酒匂です。
以前にAmazon ConnectとSFDCを連携させる手順について書きました。

Amazon ConnectをSalesforce Service Cloud上で使用してみる

Amazon ConnectはSFDC以外のアプリ（ウェブアプリである必要がある）とも連携することができます。
そこで今回は、自前のウェブアプリと連携させる場合の初期セットアップの手順までを記載いたします。

Amazon Connect Streamsとは

Amazonがオープンソースとして公開しているAmazon Connectとウェブアプリを連携するためのJavaScriptライブラリです。

Amazon Connect Streams

これによって、Contact Control Panel (CCP) UI コンポーネントをアプリ画面上に埋め込むができ、イベントドリブンなインターフェースを通じてエージェントや呼の状態を取得することができるようになります。

Amazon Connect Streamsのアーキテクチャー

ハイレベルなアーキテクチャーとしては、Amazon Connect StreamsのライブラリがAmazon Connect側のCTIサービスとアプリ（図のCRM System Integrationとなっている部分）の間に入り、互いに通信することで、連携できるようになっております。

https://github.com/aws/amazon-connect-streams/blob/master/Architecture.mdの図を転載

Amazon Connect Streamsのライブラリとアプリの連携については、アプリに埋め込まれたCCP（図のCCP IFrameConduitとなっている部分）から発行されるイベント情報をアプリ側が取得するように実装することで、Amazon Connect側のイベント情報を取得できるようになります（図のUser Defined Event Handlersの部分）。

また、アプリ側からAmazon Connect StreamsのライブラリのAPIを呼び出すことで、Amazon Connectの機能を利用することができるようになります（図のUser Defined CRM Codeの部分）。

https://github.com/aws/amazon-connect-streams/blob/master/Architecture.mdの図を転載

利用例

Amazon Connectからイベントを受信したり、アプリからAmazon Connectの機能を呼び出したりすることで、以下のような機能をアプリに実装することができます。

着信したら顧客情報の検索を行い、画面上に表示する
通話が終了したら、通話履歴を登録する画面を表示する
キャンペーンでアウトバウンド対象の顧客に電話をかけていく

電話の操作画面は、アプリ上に埋め込んだContact Control Panel (CCP)を使いますが、CCPを非表示にして同様のものを自作することもできます。

初期セットアップ

ホワイトリストへの登録

アプリのContact Control Panel (CCP)を埋め込む画面のプロトコルスキーム、ホスト、ポートをAmazon Connectの管理画面上に登録します。

Amazon Connectの管理画面上から対象の"インスタンスエイリアス"を選択します。

"アプリケーション統合"を選択し、"オリジンの追加"を選択します。

プロトコルスキーム、ホスト、ポートを入力します。

Amazon Connect Streamsのダウンロード

ソースコードをダウンロードし、.jsファイルを生成します。

Githubからソースコードをcloneします。

$ git clone https://github.com/aws/amazon-connect-streams

ディレクトリを移動します。

$ cd amazon-connect-streams

.jsファイルを生成します。

$ make

amazon-connect-streamsフォルダの直下に"connect-streams-${VERSION}.js"形式のファイルが存在していることを確認します。 2017年12月22日現在ですと、"amazon-connect-v1.2.0.js"というファイルが生成されます。

Contact Control Panel (CCP)の初期化

htmlファイルの作成

CCPを埋め込む画面用にHTMLファイルを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>amazon connect streams sample</title>
<script src="amazon-connect-v1.2.0.js"></script>
</head>
<body>

<div id="containerDiv" style="width: 320px; min-width: 200px; height: 465px; min-height: 400px;"></div>

<script>
//CCPのURLを設定する
var ccpUrl = "https://hogehoge.awsapps.com/connect/ccp#/";

connect.core.initCCP(containerDiv, {
	ccpUrl: ccpUrl,        
	loginPopup: true,          
	softphone: {              
	  disableRingtone: true, 
	  ringtoneUrl: ringtoneUrl,
	  allowFramedSoftphone: true 
	   }
	});
</script>
</body>
</html>

Github上のREADME.mdを読んだだけでは、connect.core.initCCP()メソッドの第一引数のcontainerDivにどんな値を渡せば良いのか分からなかったので、ソースを読んで確認しました。ここで指定したconnect.core.initCCPの子要素として<iframe></iframe>を追加し、そこにCCPがロードされますので、CCPをロードさせたい要素のオブジェクトを渡します。
→CCPをロードさせたいdivタグにid="containerDiv"を指定すれば表示できましたので、上記HTMLを修正しました。